<script setup lang="ts">
import { markRaw, nextTick,   reactive, ref,onBeforeUpdate } from "vue";
import * as echarts from 'echarts';

const elementChart1 = ref()
const elementChart2 = ref()

const props = defineProps({
  info1: Object,
  info2: Object,
})

const state = reactive({
  myCharts: [] as any,
  chartData: {
    element1: null as any,
    element2: null as any,
  }
})

const initChart1 = () => {
  state.chartData.element1 = markRaw(echarts.init(elementChart1.value));
  const option = {
    backgroundColor: '#FF000000',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: props.info1?.names,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2196F3",
          width: 1,
          type: "solid"
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#2196F3",
        }
      },
    }],
    yAxis: [{
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#2196F3",
          width: 1,
          type: "solid"
        },
      },
      splitLine: {
        lineStyle: {
          color: "#2196F3",
        }
      }
    }],
    series: [{
      name: '项目',
      type: 'bar',
      data:  props.info1?.value1,
      barWidth: 24, //柱子宽度
      barGap: 1, //柱子之间间距
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#2196F3'
          }, {
            offset: 1,
            color: '#2196F3'
          }]),
          opacity: 1,
        }
      }
    }, {
      name: '投资',
      type: 'bar',
      data:  props.info1?.value2,
      barWidth: 24,
      barGap: 1,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#69FFE3'
          }, {
            offset: 1,
            color: '#69FFE3'
          }]),
          opacity: 1,
        }
      }
    }]
  };
  state.chartData.element1.setOption(option);
  state.myCharts.push(state.chartData.element1);
}

const initChart2 = () => {
  state.chartData.element2 = markRaw(echarts.init(elementChart2.value));
  const option = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data:  props.info2?.names,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2196F3",
          width: 1,
          type: "solid"
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#2196F3",
        }
      },
    }],
    yAxis: [{
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#2196F3",
          width: 1,
          type: "solid"
        },
      },
      splitLine: {
        lineStyle: {
          color: "#2196F3",
        }
      }
    }],
    series: [{
      name: props.info2?.names[0],
      type: 'bar',
      data: props.info2?.value1,
      barWidth: 24, //柱子宽度
      barGap: 1, //柱子之间间距
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#2196F3'
          }, {
            offset: 1,
            color: '#2196F3'
          }]),
          opacity: 1,
        }
      }
    }, {
      name: props.info2?.names[1],
      type: 'bar',
      data:  props.info2?.value2,
      barWidth: 24,
      barGap: 1,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#69FFE3'
          }, {
            offset: 1,
            color: '#69FFE3'
          }]),
          opacity: 1,
        }
      }
    }]
  };

  state.chartData.element2.setOption(option);
  state.myCharts.push(state.chartData.element2);
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener('resize', initEchartsResizeFun);
};

onBeforeUpdate(() => {
  initEchartsResize()
  initChart1();
  initChart2();
})

</script>


<template>
  <div style="width: 100%;height: 100%;padding: 2px;box-sizing: border-box;">
    <div class="title">产业类别和规模情况</div>
    <div style="display: flex;width:calc(100% - 4px);height: calc(100% - 40px)">
      <div style="flex: 1">
        <span class="category-title">按产业类别</span>
        <div ref="elementChart1" style="width: 100%;height: calc(100% - 40px)"/>
      </div>
      <div style="flex: 1">
        <span class="category-title">按投资规模</span>
        <div ref="elementChart2" style="width: 100%;height: calc(100% - 40px)"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title {
  border-left: 4px solid #32ffc7;
  font-size: 18px;
  color: #fff;
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.category-title {
  display: block;
  font-size: 16px;
  color: #AEBBC2;
  padding: 10px 0 10px 10px;
}
</style>